<template>
  <div class="detailCard">
    <div class="DF1">
      <div><img :src="`${zhos.images}`" /></div>
      <div>
        <p>
          <b>{{ zhos.hname }}</b>
        </p>
        <p>
          <span>{{ zhos.hinfo.split(" ")[0] }}</span
          ><span>{{ zhos.hinfo.split(" ")[1] }}</span>
        </p>
      </div>
    </div>
    <p><b>医院地址:</b>{{ zhos.hadd }}</p>
    <div class="F2" id="map">地图</div>
    <div class="F3">
      <p :class="{ open: isOpen == false }">
        <b>医院介绍:</b>
        {{zhos.introduce}}
      </p>
    </div>
    <div class="F4">
      <div
        class="open"
        @click="spread"
        v-html="isOpen ? '收起更多介绍' : '展开更多介绍'"
      ></div>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  securityJsCode: "0b7fff62bb4d6f79bae15c1a1483e327",
};
export default {
  data() {
    return {
      isOpen: false,
      lat: 0,
    };
  },
  props: {
    zhos: {
      type: Object,
    },
  },
  methods: {
    spread() {
      !this.isOpen ? (this.isOpen = true) : (this.isOpen = false);
    },
  },
  mounted() {
    AMapLoader.load({
      key: "7bfbe3ab215345f405c23b5eed760ca8",
      version: "2.0",
      plugins: ["AMap.ToolBar", "AMap.PlaceSearch"],
    }).then((AMap) => {
      // let lng = 116.39,
      //   lat = 39.9;
      let map = new AMap.Map("map", {
        zoom: 20,
      });

      let searchObj = new AMap.PlaceSearch({
        city: "北京",
      });
      searchObj.search(`${this.zhos.hname}`, function (status, result) {
        let lng = result.poiList.pois[0].location.lng;
        let lat = result.poiList.pois[0].location.lat;
        let map = new AMap.Map("map", {
          zoom: 17,
          center: [lng, lat],
        });
        var marker = new AMap.Marker({
          position: new AMap.LngLat(lng, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: "北京",
        });
        // 将创建的点标记添加到已有的地图实例：
        map.add(marker);
        map.addControl(new AMap.ToolBar());
      });
    });
  },
};
</script>
<style scoped lang="scss">
.detailCard {
  border-radius: 0.5rem;
  background-color: rgba(235, 234, 234, 0.322);
  padding: 0 2vw;
  margin-top: 8vh;
}

.DF1 {
  display: flex;
  align-items: center;
  height: 15vh;

  > div:first-child {
    width: 30%;

    > img {
      width: 100%;
      border-radius: 0.5rem;
    }
  }

  > div:last-child {
    height: 100%;
    padding-left: 3vw;
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    > p {
      font-size: 1.25rem;

      > span {
        font-weight: 600;
        font-size: 1rem;
        padding: 1.5vw 2vw;
        margin-right: 2vw;
        border-radius: 0.25rem;

        &:nth-child(1) {
          background-color: rgb(254, 236, 218);
          color: rgb(250, 127, 5);
        }

        &:nth-child(2) {
          background-color: rgb(210, 251, 230);
          color: rgb(4, 195, 99);
        }
      }
    }
  }
}

.F2 {
  height: 20vh;
  border-radius: 0.5rem;
}

.F3 {
  margin: 2vh 0;
  height: fit-content;

  > p {
    > b {
      color: #000;
    }

    color: rgb(80, 80, 80);
    line-height: 2.5vh;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    &.open {
      display: -webkit-box;
    }
  }
}

.F4 {
  padding-bottom: 1vh;

  > div {
    margin: 0 auto;
    width: 50%;
    text-align: center;
    padding: 1vw 5vw;
    background-color: rgb(255, 255, 255);
    border-radius: 0.25rem;
    color: #1397d7;
  }
}
</style>